<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React App</title>
  <link rel="stylesheet" href="./todo/index.css">
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <todo-header :task-list.sync="taskList" ></todo-header>
      <todo-main :task-list="taskList"></todo-main>
      <todo-footer></todo-footer>
    </div>
  </div>
</div>
</body>
<script type="module">
  import TodoHeader from "./components/TodoHeader.js";
  import TodoMain from "./components/TodoMain.js";
  import TodoFooter from "./components/TodoFooter.js";
  new Vue({
    el:'#root',
    data:{
      taskList:[
        {
          id:Math.random().toString(36).slice(2),
          title:"金庸",
          isChecked:true
        },{
          id:Math.random().toString(36).slice(2),
          title:"古龙",
          isChecked:false
        }
      ]
    },
    components:{
      TodoHeader,
      TodoMain,
      TodoFooter
    }
  })
</script>
</html>
